<template>
  <div class="bottom">
    <div class="info">
      <div>
        <span style="font-size: 14px; color: #818181"
          >第一次做网页～～嘿嘿</span
        >
        <el-divider></el-divider>
        <span>耗时两天完成～</span>
        <el-divider></el-divider>
        <span>还有有好多不完善的地方，希望以后在学习中完善</span>
      </div>

      <div class="block">
        <span class="demonstration">啦啦啦啊～</span>
        <el-rate v-model="value1"></el-rate>
      </div>
    </div>
    <div class="icon">
      <a href="">
        <div class="jingling icon1"><div class="j i1"></div></div>
      </a>
      <a href="">
        <div class="jingling icon2"><div class="j i2"></div></div>
      </a>
      <a href="">
        <div class="jingling icon2"><div class="j i2"></div></div>
      </a>
      <a href="">
        <div class="jingling icon3"><div class="j i3"></div></div>
      </a>
      <a href="">
        <div class="jingling icon4"><div class="j i4"></div></div>
      </a>
      <a href="">
        <div class="jingling icon5"><div class="j i5"></div></div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Bottom",
  data() {
    return {
      value1: 0,
    };
  },
};
</script>

<style scoped>
.bottom {
  display: flex;

  height: 173px;
  border: 1px solid #d3d3d3;
  padding: 20px 40px;
  background-color: #f5f5f5;
}
.info,
.icon {
  width: 50%;
  padding: 0 98px;
}
.info {
  text-align: center;
  line-height: 100%;
  font-size: 14px;
}
.el-divider {
  margin: 19px 0;
}
.icon {
  position: relative;
  /* display: flex;
  justify-content: space-around;
  align-items: center; */
  padding: 62px;
}
.jingling {
  width: 53px;
  height: 45px;
  /* position: absolute; */
  float: left;
  margin-left: 18px;
}

.icon1 {
  background: url("../assets/jing.png") no-repeat;
  background-size: 112px 552px;
  background-position: -63px -456.5px;
}
.icon2 {
  background: url("../assets/jing.png") no-repeat;
  background-size: 112px 552px;
  background-position: -63px -101px;
}
.icon3 {
  background: url("../assets/jing.png") no-repeat;
  background-size: 112px 552px;
  background-position: 0 0;
}
.icon4 {
  background: url("../assets/jing.png") no-repeat;
  background-size: 112px 552px;
  background-position: -60px -50px;
}
.icon5 {
  background: url("../assets/jing.png") no-repeat;
  background-size: 112px 552px;
  background-position: 0 -101px;
}
.j {
  margin-top: 47px;
  margin-left: -11px;
  width: 71px;
  height: 13px;
}
.i1 {
  background: url("../assets/j.png") no-repeat;
  background-size: 180px 139px;

  background-position: 0 -108px;
}
.i2 {
  margin-left: 3px;
  background: url("../assets/j.png") no-repeat;
  background-size: 180px 139px;

  background-position: -1px -91px;
}
.i3 {
  width: 54px;
  margin-left: 0px;
  background: url("../assets/j.png") no-repeat;
  background-size: 180px 139px;
  background-position: 0 0;
}
.i4 {
  margin-left: 3px;
  background: url("../assets/j.png") no-repeat;
  background-size: 180px 139px;
  background-position: 0 -54px;
}
.i5 {
  margin-left: -1px;
  width: 50px;
  background: url("../assets/j.png") no-repeat;
  background-size: 180px 139px;
  background-position: -1px -72px;
}
</style>
